<ngm-search [formControl]="searchControl" class="w-full rounded-xl" />

<ul class="w-full flex items-center px-3 py-2 mb-1 space-x-1 bg-gray-25 border-b-[0.5px] border-black/[0.08]"
  cdkListbox
  [(ngModel)]="type"
  >
  @for (type of TYPES; track type.value) {
    <div #option="cdkOption" class="flex items-center px-2 h-6 rounded-md hover:bg-gray-100 cursor-pointer text-sm font-medium text-gray-700 "
      [ngClass]="{'bg-gray-200': option.isSelected()}"
      [cdkOption]="type.value"
    >
      {{ ('PAC.Xpert.ToolsetType_' + type.label) | translate: {Default: type.label} }}
    </div>
  }
</ul>

@if (type()[0]) {
  @for (toolset of toolsets(); track toolset.id) {
    <div cdkMenuItem class="shrink-0 w-full flex justify-start items-center p-1 rounded-lg overflow-hidden"
      (click)="createToolset(toolset)"
      (mouseover)="openToolsetTip(toolset, overlayTrigger)"
      (mouseout)="toolDetailOpen.set(false)"
      cdkOverlayOrigin
      #overlayTrigger="cdkOverlayOrigin"
      >
      <emoji-avatar [avatar]="toolset.avatar" xs class="shrink-0 mr-2 overflow-hidden rounded-full scale-95"  />
      <div class="flex-1 truncate" [ngmHighlight]="searchText()" [content]="toolset.name">
        {{toolset.name}}
      </div>
    </div>
  } @empty {
    <div class="p-2">
      {{ 'PAC.Xpert.NoToolset' | translate: {Default: 'No toolset'} }}
    </div>
  }
} @else {
  @for (toolset of toolProviders(); track toolset.id) {
    <div cdkMenuItem class="shrink-0 w-full flex justify-start items-center p-1 rounded-lg overflow-hidden"
      [cdkMenuItemDisabled]="toolset.not_implemented"
      (click)="createBuiltinToolset(toolset)"
      (mouseover)="openBuiltinToolsetTip(toolset, overlayTrigger)"
      (mouseout)="toolDetailOpen.set(false)"
      cdkOverlayOrigin
      #overlayTrigger="cdkOverlayOrigin"
      >
      <emoji-avatar [avatar]="toolset.avatar" xs class="shrink-0 mr-2 overflow-hidden rounded-full scale-95"  />
      <div class="flex-1 truncate" [ngmHighlight]="searchText()" [content]="toolset.name">
        {{toolset.name}}
      </div>
    </div>
  }
}

<ng-template
  cdkConnectedOverlay
  cdkConnectedOverlayGrowAfterOpen
  [cdkConnectedOverlayOrigin]="toolDetailTrigger()"
  [cdkConnectedOverlayOpen]="toolDetailOpen()"
  [cdkConnectedOverlayOffsetX]="10"
  [cdkConnectedOverlayPositions]="[
    {
      originX: 'end',
      originY: 'top',
      overlayX: 'start',
      overlayY: 'top'
    },
  ]"
>
  @if (toolset()) {
    <xpert-toolset-card [toolset]="toolset()" class="toolset-tip-card w-96 bg-components-card-bg " />
  } @else if (builtinToolset()) {
    <xpert-tool-provider-card [provider]="builtinToolset()" class="toolset-tip-card w-96 bg-components-card-bg" />
  }
</ng-template>